<template>
  <ui5-list id="todo-list" selection-mode="Multiple" ref="list">
    <TodoItem
      v-for="todo in todos"
      :todo="todo"
      :key="todo.id"
      :datakey="todo.id"
      @item-deleted="onItemDeleted"
      @item-edit="onItemEdit"
    />
  </ui5-list>
</template>

<script setup lang="ts">
  import TodoItem from '../todo/TodoItem.vue';
  import '@ui5/webcomponents/dist/List';

  interface Todo {
    id: string | number;
    text: string;
    deadline: string;
    done: boolean;
  }

  const { todos } = defineProps<{ todos: Todo[] }>();
  const emit = defineEmits<{
    (e: 'item-deleted', payload: { id: string | number }): void;
    (e: 'item-edit', payload: { id: string | number }): void;
  }>();

  function onItemDeleted(event: { id: string | number }) {
    emit('item-deleted', event);
  }
  function onItemEdit(event: { id: string | number }) {
    emit('item-edit', event);
  }
</script>

<style></style>
